@charset "utf-8";
@import "common";
.header {
    background: $themeColor;
    height: 4.5rem;
    line-height: 4.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .find {
        background: rgb(81,168,180);
        border-radius: 5px;
        height: 70%;
        line-height: 2;
        text-align: center;
        .btn-find {
            color: white;
            border: 1px solid transparent;
            padding: 0 0.6rem;
            margin: 0;
            background: transparent;
            height: 100%;
            border-radius: 5px;
        }
        .assistant {
            background: white;
            color: $themeColor;
            margin-left: -.7rem;
        }
    }
    .map {
        position: absolute;
        right: 1.5rem;
        top: 1rem;
        img {
            width: 2rem;
        }
    }
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
.home-main{
    padding-bottom: 5rem;
}
.list-group {
    margin: 0;
    ul {
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
            height: 4rem;
            line-height: 4rem;
            width: calc((100/3)*100%);
            font-family: "HiraginoSansGB";
            font-size: 1.4rem;
            text-align: center;
            color: $mutedColor;
            border-right: 1px solid #ccc;
        }

    }
    .list-group-item {
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 1rem;
        line-height: 2;
        border-bottom: 1px solid #ccc;
        img{
            height: 1.25rem;
            vertical-align: middle;
        }
        .item-left {
            font-size: 1.2rem;
            color: rgb(93, 93, 93);
            img {
                padding-right: 0.5rem;
            }
            .date {
                margin-left: 1.7rem;
                span {
                    font-weight: bold;
                    font-size: 1.4rem;
                    color: rgb(51, 51, 51);
                }
            }
        }
        .item-right {
            line-height: 6;
            strong {
                font-size: 1.5rem;
                color: rgb(230, 59, 14);
            }
            img {
                margin-left: 1rem;
            }
        }
    }
}
.footer {
    @extend %maxWidth;
    position: fixed;
    bottom: 0;
    background: rgb(248,250,251);
    height: 5rem;
    .footerWrap {
        width: 76%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
            display: flex;
            height: 5rem;
            width: 5rem;
            justify-content: center;
            align-items: flex-end;
            text-decoration: none;
            background: transparent top center no-repeat;
            background-size: 2rem;
            span {
                display: block;
                font-size: 0.8rem;
            }
        }
        .home {
            background-image: url("../img/home.png");
            color: $themeColor;
            height: 4rem;
        }
        .edit {
            background: $themeColor;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 1.5rem;
            }
        }
        .mine {
            height: 4rem;
            background-image: url("../img/mine.png");
            color: rgb(155,155,155);
        }
    }

}
